<%--
  Created by IntelliJ IDEA.
  User: 喝假酒的ywj
  Date: 2020/3/6
  Time: 20:12
  To change this template use File | Settings | File Templates.
--%>
<!DOCTYPE html >
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>i movie</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/movieDetail.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css" />
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/nprogress.css" />
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
    <script src="${pageContext.request.contextPath}/js/nprogress.js"></script>
    <script src="${pageContext.request.contextPath}/js/template-web.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
    <script src="${pageContext.request.contextPath}/layer/layer.js"></script>
    <script src="${pageContext.request.contextPath}/js/dayjs.min.js"></script>
    <script>
        $(function () {
            let id = getUrlParam('id');
            let userId = $.cookie("userId");
            //获取到电影详情
            NProgress.start();
            if(id!==null){
                $.ajax({
                    url:'${pageContext.request.contextPath}/front/movie/'+id,
                    async:true,
                    dataType: "json",
                    success:function (data) {
                        NProgress.done();
                        console.log(data);
                        $('#movieName').text(data.data.name);
                        $('#movieEname').text(data.data.ename);
                        $('#movieDesc').text(data.data.desc);
                        $('#areaAndDuration').text(data.data.countryName+" / "+data.data.duration+"分钟");
                        $('#releaseDate').text(data.data.yearName+data.data.countryName+"上映");
                        $('#director').text(data.data.director);
                        $("#directorPic").attr('src',data.data.directorPic);
                        $('#movieCover').attr('src',data.data.cover);
                        $('#wishNum').text(data.data.want_count);
                        $('#scoreNum').text(data.data.score);
                        if(data.data.booking==0){
                            $('#bookingNum').text('暂无');
                        }else{
                            $('#bookingNum').text(data.data.booking);
                        }
                        if(data.data.effect==='2DIMAX'){
                            $('#movieEffect').removeClass("m3d");
                            $('#movieEffect').removeClass("imax3d");
                            $('#movieEffect').addClass("imax2d");
                        }
                        if(data.data.effect==='3DIMAX'){
                            $('#movieEffect').removeClass("m3d");
                            $('#movieEffect').addClass("imax3d");
                            $('#movieEffect').removeClass("imax2d");
                        }
                        if(data.data.effect==='3D'){
                            $('#movieEffect').addClass("m3d");
                            $('#movieEffect').removeClass("imax3d");
                            $('#movieEffect').removeClass("imax2d");
                        }
                        var html = template('tempsss',{list:data.data.actors});
                        $('#actorsList').html(html);
                        var htmlType = template('tempType',{list:data.data.types});
                        $('#types').html(htmlType);
                    }
                });
            }
            //评论分页
            if((${data.total})==0){
                $('#pagination').hide()
            }else{
                $('#pagination').bootstrapPaginator({
                    //主版本号
                    bootstrapMajorVersion: 3,
                    //当前页
                    currentPage: ${data.pageNum},
                    //总页数
                    totalPages: ${data.pages},
                    //请求url
                    pageUrl: function (type, page, current) {
                        return '${pageContext.request.contextPath}/front/movie/movieDetail?id='+id+'&pageNum='+page;
                    },
                    //显示分页条信息
                    itemTexts: function (type, page, current) {
                        switch (type) {
                            case "first":
                                return "首页";
                            case "prev":
                                return "上一页";
                            case "next":
                                return "下一页";
                            case "last":
                                return "尾页";
                            case "page":
                                return page;
                        }
                    },
                });
            }

            //获取评论列表
            $('.overlay').hide();
            $('#score').hide();
            $('.tab-title').click(function () {
                $('.tab-title').removeClass('active');
                $(this).addClass('active');
                let index = $(this).index();
                if(index===0){
                    $('#module1').show();
                    $('#module3').show();
                    $('#module2').show();
                    $('#pagination').show();
                }
                if(index===1){
                    $('#module1').hide();
                    $('#module3').hide();
                    $('#module2').show();
                    $('#pagination').hide();
                }
            });
            $('#rate').click(function () {
                $('.overlay').show()
                $('body').css('overflow','hidden');
            });
            $('.score-star.commont li').click(function () {
                $('.score-star.commont li i').removeClass('active');
                $(this).find('i').addClass('active');
                $(this).prevAll().find('i').addClass('active');
                let index = $(this).index();
                if(index===0){
                    $('.score .num').text('1');
                    $('.score').show();
                    $('.no-score').hide();
                    $('.score-message').text('超烂的').show();
                    $("input[name='score']").val(1);
                    $('#commentBtn').removeAttr("disabled");
                }
                if(index===1){
                    $('.score .num').text('2');
                    $('.score').show();
                    $('.no-score').hide();
                    $('.score-message').text('超烂的').show();
                    $("input[name='score']").val(2);
                    $('#commentBtn').removeAttr("disabled");
                }
                if(index===2){
                    $('.score .num').text('3');
                    $('.score').show();
                    $('.no-score').hide();
                    $('.score-message').text('比较差').show();
                    $("input[name='score']").val(3);
                    $('#commentBtn').removeAttr("disabled");
                }
                if(index===3){
                    $('.score .num').text('4');
                    $('.score').show();
                    $('.no-score').hide();
                    $('.score-message').text('比较差').show();
                    $("input[name='score']").val(4);
                    $('#commentBtn').removeAttr("disabled");
                }
                if(index===4){
                    $('.score .num').text('5');
                    $('.score').show();
                    $('.no-score').hide();
                    $('.score-message').text('一般般').show();
                    $("input[name='score']").val(5);
                    $('#commentBtn').removeAttr("disabled");
                }
                if(index===5){
                    $('.score .num').text('6');
                    $('.score').show();
                    $('.no-score').hide();
                    $('.score-message').text('一般般').show();
                    $("input[name='score']").val(6);
                    $('#commentBtn').removeAttr("disabled");
                }
                if(index===6){
                    $('.score .num').text('7');
                    $('.score').show();
                    $('.no-score').hide();
                    $('.score-message').text('比较好').show();
                    $("input[name='score']").val(7);
                    $('#commentBtn').removeAttr("disabled");
                }
                if(index===7){
                    $('.score .num').text('8');
                    $('.score').show();
                    $('.no-score').hide();
                    $('.score-message').text('比较好').show();
                    $("input[name='score']").val(8);
                    $('#commentBtn').removeAttr("disabled");
                }
                if(index===8){
                    $('.score .num').text('9');
                    $('.score').show();
                    $('.no-score').hide();
                    $('.score-message').text('棒极了').show();
                    $("input[name='score']").val(9);
                    $('#commentBtn').removeAttr("disabled");
                }
                if(index===9){
                    $('.score .num').text('10');
                    $('.score').show();
                    $('.no-score').hide();
                    $('.score-message').text('完美').show();
                    $("input[name='score']").val(10);
                    $('#commentBtn').removeAttr("disabled");
                }
            });
            $('.overlay').click(function () {
                $(this).hide();
                $('body').css('overflow','auto');
            })
            $('.comment-box').click(function (e) {
                e.stopPropagation()
            });
            //想看
            $('#wishBth').click(function () {
                if(userId===undefined || userId=='null'){
                    layer.msg('请先登录',{time:2000},function () {
                        window.location.href='${pageContext.request.contextPath}/front/index/login'
                    });
                }else{
                    NProgress.start();
                    $.ajax({
                        url:'${pageContext.request.contextPath}/front/movie/checkWish',
                        async:true,
                        dataType: "json",
                        success:function (data) {
                            NProgress.done()
                            if(!data.data){
                                $.ajax({
                                    url:'${pageContext.request.contextPath}/front/movie/addWish',
                                    async:true,
                                    data:{movieId:id},
                                    dataType: "json",
                                    success:function (data) {
                                        layer.msg("敬请期待哦")
                                        let newWish = parseInt($('#wishNum').text())+1
                                        $.ajax({
                                            url:'${pageContext.request.contextPath}/front/movie/modifyMovieWish',
                                            async:true,
                                            data:{wish:newWish,movieId:id},
                                            dataType: "json",
                                            success:function (data) {
                                                $('#wishNum').text(newWish);
                                                NProgress.done();
                                            }
                                        })
                                    }
                                })
                            }else{
                                layer.msg("请不要重复点击");
                            }
                        }
                    })
                }
            });
            //提交评论
            $('#commentBtn').click(function () {
                if(userId===undefined || userId=='null'){
                    layer.msg('请先登录',function () {
                        window.location.href="${pageContext.request.contextPath}/front/index/login"
                    })
                }else{
                    NProgress.start();
                    $.ajax({
                        url:'${pageContext.request.contextPath}/front/movie/checkComment',
                        async:true,
                        dataType: "json",
                        success:function (data) {
                            NProgress.done();
                            if(!data.data){
                                let score = $('#scoreHidden').val();
                                let comment = $('#comment').val();
                                let create_time = dayjs().format('YYYY-MM-DD');
                                $.ajax({
                                    url:'${pageContext.request.contextPath}/front/movie/addComment',
                                    async:true,
                                    data:{movieId:id,score:score,comment:comment,create_time:create_time},
                                    dataType: "json",
                                    success:function (data) {
                                        NProgress.done();
                                        layer.msg("感谢评价",function () {
                                            window.location.reload();
                                        })
                                    }
                                })
                            }else{
                                layer.msg("您已经评论过了");
                            }
                        }
                    });
                }
            })
            function getUrlParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]); return null;
            }
        })
    </script>
</head>
<body>
<%@ include file="header.jsp"%>
<div class="movie-detail-container">
    <div class="banner">
        <div class="wrapper">
            <div class="celeInfo-left">
                <div class="avatar-shadow">
                    <img class="avatar" src="" alt="" id="movieCover">
                    <div class="movie-ver"><i class="imax2d" id="movieEffect"></i></div>
                </div>
            </div>
            <div class="celeInfo-right clearfix">
                <div class="movie-brief-container">
                    <h1 class="name" id="movieName"></h1>
                    <div class="ename ellipsis" id="movieEname"></div>
                    <ul>
                        <li class="ellipsis" id="types">

                        </li>
                        <li class="ellipsis" id="areaAndDuration">

                        </li>
                        <li class="ellipsis" id="releaseDate"></li>
                    </ul>
                </div>
                <div class="action-buyBtn">
                    <div class="action clearfix">
                        <a class="wish" id="wishBth">
                            <div>
                                <span class="wish-msg">想看</span>
                            </div>
                        </a>
                        <a class="score-btn" id="scoreBtn" href="javascript:;">
                            <div id="rate">
                                <span>评分</span>
                            </div>
                        </a>
                    </div>
                </div>

                <div class="movie-stats-container">
                    <div class="movie-index" id="wish">
                        <p class="movie-index-title">想看数</p>
                        <div class="movie-index-content score normal-score">
                            <span class="index-left info-num one-line" id="wishNum"></span>
                        </div>
                    </div>
                    <div class="movie-index" id="scores">
                        <p class="movie-index-title" >评分</p>
                        <div class="movie-index-content score normal-score">
                            <span class="index-left info-num one-line" id="scoreNum"></span>
                        </div>
                    </div>
                    <div class="movie-index" id="booking">
                        <p class="movie-index-title">累计票房</p>
                        <div class="movie-index-content box" id="bookingNum">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="main-content-container container">
        <div class="tab-container">
            <div class="tab-title-container">
                <div class="tab-title active" >介绍</div>
                <div class="tab-title">演职人员</div>
            </div>
        </div>
        <div class="tag-content">
            <div class="module" id="module1">
                <div class="mod-title">
                    <h2>剧情简介</h2>
                </div>
                <div class="mod-content">
                    <span class="dra" id="movieDesc"></span>
                </div>
            </div>
            <div class="module" id="module2">
                <div class="mod-title">
                    <h2>演职人员</h2>
                </div>
                <div class="mod-content">
                    <div class="celebrity-container clearfix">
                        <div class="celebrity-group">
                            <div class="celebrity-type">
                                导演
                            </div>
                            <ul class="celebrity-list">
                                <li class="celebrity " >
                                    <a href="" target="_blank" class="portrait">
                                        <img class="default-img" alt="" src="" id="directorPic">
                                    </a>
                                    <div class="info">
                                        <a href="javascript:;"class="name" id="director">

                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="celebrity-group">
                            <div class="celebrity-type">
                                演员
                            </div>
                            <ul class="celebrity-list clearfix" id="actorsList">


                            </ul>
                        </div>
                    </div>

                </div>
            </div>
            <div class="module" id="module3">
                <div class="mod-title">
                    <h2>热门短评</h2>
                </div>
                <div class="mod-content">
                    <div class="comment-list-container">
                        <ul id="comentList">
                            <c:forEach items="${data.list}" var="item">
                                <li class="comment-container">
                                    <div class="portrait-container">
                                        <div class="portrait">
                                            <img src="${item.user.avatar}" alt="" style="width: 50px;height: 50px">
                                        </div>
                                    </div>
                                    <div class="main">
                                        <div class="main-header clearfix">
                                            <div class="user">
                                                <span class="name">${item.user.nickname}</span>
                                            </div>
                                            <div class="time">
                                                <span >${item.create_time}</span>
                                                <c:if test="${item.score==1}">
                                                    <ul class="score-star clearfix" data-score="8">
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right "></i>
                                                        </li>
                                                    </ul>
                                                </c:if>
                                                <c:if test="${item.score==2}">
                                                    <ul class="score-star clearfix" data-score="8">
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right "></i>
                                                        </li>
                                                    </ul>
                                                </c:if>
                                                <c:if test="${item.score==3}">
                                                    <ul class="score-star clearfix" data-score="8">
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right "></i>
                                                        </li>
                                                    </ul>
                                                </c:if>
                                                <c:if test="${item.score==4}">
                                                    <ul class="score-star clearfix" data-score="8">
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right "></i>
                                                        </li>
                                                    </ul>
                                                </c:if>
                                                <c:if test="${item.score==5}">
                                                    <ul class="score-star clearfix" data-score="8">
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right "></i>
                                                        </li>
                                                    </ul>
                                                </c:if>
                                                <c:if test="${item.score==6}">
                                                    <ul class="score-star clearfix" data-score="8">
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right "></i>
                                                        </li>
                                                    </ul>
                                                </c:if>
                                                <c:if test="${item.score==7}">
                                                    <ul class="score-star clearfix" data-score="8">
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right "></i>
                                                        </li>
                                                    </ul>
                                                </c:if>
                                                <c:if test="${item.score==8}">
                                                    <ul class="score-star clearfix" data-score="8">
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right "></i>
                                                        </li>
                                                    </ul>
                                                </c:if>
                                                <c:if test="${item.score==9}">
                                                    <ul class="score-star clearfix" data-score="8">
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right"></i>
                                                        </li>
                                                    </ul>
                                                </c:if>
                                                <c:if test="${item.score==10}">
                                                    <ul class="score-star clearfix" data-score="8">
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star left active"></i>
                                                        </li>
                                                        <li>
                                                            <i class="half-star right active"></i>
                                                        </li>
                                                    </ul>
                                                </c:if>
                                            </div>
                                            <div class="comment-content">${item.comment}</div>
                                        </div>
                                    </div>
                                </li>
                            </c:forEach>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <nav style="text-align: center">
        <ul class="detail-pager" id="pagination" >页面</ul>
    </nav>

</div>
<div class="overlay">
    <div class="comment-box">
        <form id="comment-form">
            <div class="score-msg-container active">
                <div class="score" id="score"><span class="num">1</span>分</div>
                <div class="score-message">超烂啊</div>
                <div class="no-score">
                    请点击星星评分
                </div>
            </div>
            <div class="score-star-contaienr">
                <ul class="score-star clearfix commont">
                    <li>
                        <i class="half-star left "></i>
                    </li>
                    <li>
                        <i class="half-star right "></i>
                    </li>
                    <li>
                        <i class="half-star left "></i>
                    </li>
                    <li>
                        <i class="half-star right "></i>
                    </li>
                    <li>
                        <i class="half-star left "></i>
                    </li>
                    <li>
                        <i class="half-star right "></i>
                    </li>
                    <li>
                        <i class="half-star left "></i>
                    </li>
                    <li>
                        <i class="half-star right "></i>
                    </li>
                    <li>
                        <i class="half-star left "></i>
                    </li>
                    <li>
                        <i class="half-star right"></i>
                    </li>
                </ul>
            </div>
            <div class="content-container">
                <input type="hidden" name="score" value="0" id="scoreHidden">
                <textarea placeholder="快来说说你的看法吧" name="content" id="comment" cols="30" rows="10"></textarea>
            </div>
            <input class="btn" type="button" value="提交"  disabled id="commentBtn">
        </form>
    </div>
</div>
<%@ include file="footer.jsp"%>
<script id="tempsss" type="text/html">
    {{each list item index}}
    <li class="celebrity actor" >
        <a href="javascript:;" class="portrait">
            <img class="default-img" alt="" src="{{item.pic}}">
        </a>
        <div class="info">
            <a href="javascript:;" class="name">
                {{item.name}}
            </a>
            <br><span class="role">饰：{{item.roleName}}</span>
        </div>
    </li>
    {{/each}}
</script>
<script id="tempType" type="text/html">
    {{each list item index}}
        <a class="text-link" href="javascript:;"> {{item}} </a>
    {{/each}}
</script>
</body>
</html>
